<template>
    <view class="flex-center">
        <view :class="'wf-page wf-page' + type">
            <!--    left    -->
            <view>
                <view id="left" v-if="leftList.length">
                    <view :class="`selector-query-id-${item?.id || item?.product_id}`" v-for="(item, index) in leftList"
                        :key="index" class="wf-item" @tap="itemTap(item)">
                        <WaterfallsFlowItem :newcomer="newcomer" :types="types" :item="item" :isStore="isStore"
                            :type="type" @goShop="goShop" />
                    </view>
                </view>
            </view>
            <!--    right    -->
            <view>
                <view id="right" v-if="rightList.length">
                    <view :class="`selector-query-id-${item?.id || item?.product_id}`"
                        v-for="(item, index) in rightList" :key="index" class="wf-item" @tap="itemTap(item)">
                        <WaterfallsFlowItem :newcomer="newcomer" :types="types" :item="item" :isStore="isStore"
                            :type="type" @goShop="goShop" />
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>

<script>
import WaterfallsFlowItem from '../WaterfallsFlowItem/NewWaterfallsFlowItem.vue'

export default {
    components: {
        WaterfallsFlowItem,
    },
    props: {
        // 瀑布流列表
        wfList: {
            type: Array,
            require: true,
        },
        updateNum: {
            type: Number,
            default: 10,
        },
        type: {
            type: Number,
            default: 0,
        },
        isStore: {
            type: [String, Number],
            default: '1',
        },
        types: {
            type: String,
            default: '',
        },
        newcomer: {
            tyle: Number,
            default: 0
        }
    },
    data() {
        return {
            allList: [], // 全部列表
            leftList: [], // 左边列表
            rightList: [], // 右边列表
            mark: 0, // 列表标记
            boxHeight: [], // 下标0和1分别为左列和右列高度
        }
    },
    watch: {
        // 监听列表数据变化
        wfList: {
            handler(nVal, oVal) {
                // 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
                if (
                    !this.wfList.length ||
                    (this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)
                ) {
                    this.allList = []
                    this.leftList = []
                    this.rightList = []
                    this.boxHeight = []
                    this.mark = 0
                }

                // 如果列表有值，调用waterfall方法
                if (this.wfList.length) {
                    this.allList = this.wfList
                    this.leftList = []
                    this.rightList = []
                    this.boxHeight = []
                    this.allList.forEach((v, i) => {
                        if (
                            this.allList.length < 3 ||
                            (this.allList.length <= 7 && this.allList.length - i > 1) ||
                            (this.allList.length > 7 && this.allList.length - i > 2)
                        ) {
                            if (i % 2) {
                                this.rightList.push(v)
                            } else {
                                this.leftList.push(v)
                            }
                        }
                    })
                    if (this.allList.length < 3) {
                        this.mark = this.allList.length + 1
                    } else if (this.allList.length <= 7) {
                        this.mark = this.allList.length - 1
                    } else {
                        this.mark = this.allList.length - 2
                    }
                    if (this.mark < this.allList.length) {
                        this.waterFall()
                    }
                }
            },
            immediate: true,
            deep: true,
        },
        mounted() { },

        // 监听标记，当标记发生变化，则执行下一个item排序
        mark() {
            const len = this.allList.length
            if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
                this.waterFall()
            }
        },
    },
    methods: {
        // 瀑布流排序
        waterFall() {
            const i = this.mark
            if (i == 0) {
                // 初始化，从左边开始插入
                this.leftList.push(this.allList[i])
                // 更新左边列表高度
                this.getViewHeight(0)
            } else if (i == 1) {
                // 第二个item插入，默认为右边插入
                this.rightList.push(this.allList[i])
                // 更新右边列表高度
                this.getViewHeight(1)
            } else {
                // 根据左右列表高度判断下一个item应该插入哪边
                if (!this.boxHeight.length) {
                    this.rightList.length < this.leftList.length
                        ? this.rightList.push(this.allList[i])
                        : this.leftList.push(this.allList[i])
                } else {
                    const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0
                    if (leftOrRight) {
                        this.rightList.push(this.allList[i])
                    } else {
                        this.leftList.push(this.allList[i])
                    }
                }
                // 更新插入列表高度
                this.getViewHeight()
            }
        },
        // 获取列表高度
        getViewHeight() {
            // 使用nextTick，确保页面更新结束后，再请求高度
            this.$nextTick(() => {
                setTimeout(() => {
                    uni
                        .createSelectorQuery()
                        .in(this)
                        .select('#right')
                        .boundingClientRect((res) => {
                            res ? (this.boxHeight[1] = res.height) : ''
                            uni
                                .createSelectorQuery()
                                .in(this)
                                .select('#left')
                                .boundingClientRect((res) => {
                                    res ? (this.boxHeight[0] = res.height) : ''
                                    this.mark = this.mark + 1
                                })
                                .exec()
                        })
                        .exec()
                }, 100)
            })
        },
        // item点击
        itemTap(item) {
            this.$emit('itemTap', item)
        },
        // item点击
        goShop(item) {
            this.$emit('goShop', item)
        },
    },
}
</script>

<style lang="scss" scoped>
$page-padding: 10px;
$grid-gap: 10px;

.wf-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: $grid-gap;
}

.wf-item {
    width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
    padding-bottom: $grid-gap;
}

.wf-page1 .wf-item {
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding-bottom: 0;
}

.wf-item-page {
    padding-bottom: 20rpx;
}
</style>
